<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
<!--            <div class="search-item">-->
<!--                <label>考试类型：</label>-->
<!--                <div class="table-query-input">-->
<!--                    <el-select v-model="queryData.examType" clearable>-->
<!--                        <el-option label="职业题库" value="zhiye"></el-option>-->
<!--                        <el-option label="高教题库" value="gjtk"></el-option>-->
<!--                    </el-select>-->
<!--                </div>-->
<!--            </div>-->
            <div  class="search-item">
                <label>行业：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.industryId"
                        v-loading="industryFlag"
                        filterable
                        clearable
                        placeholder="请选择行业"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>考试：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.examId"
                        v-loading="examFlag"
                        filterable
                        clearable
                        placeholder="请选择考试"
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in examData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>产品名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="产品名称"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('添加产品')"
            >新增数据
            </el-button>
            <el-button
                type="danger"
                plain
                style="margin-bottom: 2em"
                icon="el-icon-delete"
                :disabled="selectDisable"
                @click="
                    tableDelete(
                        '/exam/product/base/deletes',
                        {
                            ids: tableSelect
                        },
                        true
                    )
                "
            >批量删除
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="tableSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="产品名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="industryName"
                    label="行业名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="examName"
                    label="考试名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="categoryName"
                    label="科目名称"
                    min-width="100"
                ></el-table-column>
                <!--                <el-table-column-->
                <!--                    prop="price"-->
                <!--                    label="原价￥"-->
                <!--                    min-width="100"-->
                <!--                >-->
                <!--                    <template slot-scope="scope">-->
                <!--                        {{ priceChange(scope.row.price) }}-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                    prop="agentPrice"-->
                <!--                    label="代理价格￥"-->
                <!--                    min-width="100"-->
                <!--                >-->
                <!--                    <template slot-scope="scope">-->
                <!--                        {{ priceChange(scope.row.agentPrice) }}-->
                <!--                    </template>-->
                <!--                </el-table-column>-->
                <!--                <el-table-column-->
                <!--                    prop="days"-->
                <!--                    label="有效天数"-->
                <!--                    min-width="100"-->
                <!--                ></el-table-column>-->
                <!--                <el-table-column-->
                <!--                    prop="endDate"-->
                <!--                    label="有效日期"-->
                <!--                    min-width="100"-->
                <!--                ></el-table-column>-->
                <el-table-column
                    prop="columnName"
                    label="栏目名称"
                    min-width="100"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                                sortEditSave(
                                    '/exam/product/base/change-sort',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            class="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row
                                )
                            "
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="warning"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/product/base/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            width="70%"
            custom-class="two-dialog"
        >
            <el-form
                v-if="dialogFormVisible"
                ref="dataForm"
                :model="dataForm"
                label-width="6em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item label="产品名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>

                <el-form-item
                    label="行业"
                    prop="industryId"
                >
                    <el-select
                        v-model="dataForm.industryId"
                        :disabled="!dataForm.addAction"
                        placeholder="请选择行业"
                        clearable
                    >
                        <el-option
                            v-for="item in industryData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="考试"
                    prop="examId"
                >
                    <el-select
                        v-model="dataForm.examId"
                        :disabled="!dataForm.addAction"
                        placeholder="请选择考试"
                        clearable
                        filterable
                        reserve-keyword
                    >
                        <el-option
                            v-for="item in dataFormExamData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="科目"
                    prop="categoryId"
                >
                    <el-cascader
                        v-model="dataForm.categoryId"
                        :disabled="!dataForm.addAction"
                        :options="categoryData"
                        :props="categoryProps"
                        clearable
                    ></el-cascader>
                </el-form-item>
                <el-form-item
                    label="栏目"
                    prop="columnIds"
                >

                    <el-select
                        v-model="dataForm.columnIds"
                        multiple
                        placeholder="请选择栏目"
                    >
                        <el-option
                            v-for="item in columnData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                    <!--                    <el-transfer-->
                    <!--                        v-model="dataForm.columnIds"-->
                    <!--                        :props="{-->
                    <!--                                key: 'id',-->
                    <!--                                 label: 'name'-->
                    <!--                                 }"-->
                    <!--                        :data="columnData">-->
                    <!--                    </el-transfer>-->
                </el-form-item>

                <el-form-item label="排序" prop="sort">
                    <el-input v-model="dataForm.sort"></el-input>
                </el-form-item>
                <!--                <el-form-item label="原价(分)" prop="price">-->
                <!--                    <el-input-number v-model="dataForm.price"></el-input-number>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item label="代理价(分)" prop="agentPrice">-->
                <!--                    <el-input-number v-model="dataForm.agentPrice"></el-input-number>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item-->
                <!--                    label="有效日期"-->
                <!--                    prop="endDate"-->
                <!--                >-->
                <!--                    <el-date-picker-->
                <!--                        v-model="dataForm.endDate"-->
                <!--                        type="date"-->
                <!--                        placeholder="选择日期"-->
                <!--                        value-format="yyyy-MM-dd"-->
                <!--                        style="width: 100%;"-->
                <!--                    ></el-date-picker>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item-->
                <!--                    label="有效天数"-->
                <!--                    prop="days"-->
                <!--                >-->
                <!--                    <el-input-->
                <!--                        v-model="dataForm.days"-->
                <!--                    ></el-input>-->
                <!--                </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="save('/exam/product/base/update')"
                >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Fetch from "@/api/request.js";
import {execCall, TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, put, post} from "@/api/request";
import {treeList2Tree} from "@/utils";

export default {
    name: "ProductBase",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            firstChangeCategory:true,
            examType: null,
            industryData: [],
            examData: [],
            categoryData: [],
            columnData: [],
            columnDataIds: [],
            industryFlag: false,
            examFlag: false,
            columnFlag: false,
            dataFormExamFlag: false,
            dataFormExamData: [],
            dataFormCategoryData: [],
            categoryFlag: false,
            queryData: {
                examType: null,
                base: true,
                name: "",
                industryId: null,
                examId: null,
            },
            categoryProps: {
                checkStrictly: true,
                emitPath: false,
                label: "name",
                value: "id",
            },

            initAddForm: {
                id: null,
                name: null,
                price: null,
                agentPrice: null,
                sort: 100,
                industryId: null,
                examId: null,
                categoryId: null,
                columnIds: [],
                days: null,
                endDate: null,
                examType: "zhiye"
            },
            dataFormRule: {
                industryId: [
                    {
                        required: true,
                        message: "请选择行业",
                        trigger: "change"
                    }
                ],
                categoryId: [
                    {
                        required: true,
                        message: "请选择科目",
                        trigger: "change"
                    }
                ],
                columnIds: [
                    {
                        required: true,
                        message: "请选择栏目",
                        trigger: "change"
                    }
                ],
                examId: [
                    {
                        required: true,
                        message: "请选择考试",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入产品名称",
                        trigger: "blur"
                    }
                ],
                // days: [
                //     {
                //         required: true,
                //         message: "请输入有效天数",
                //         trigger: "blur"
                //     }
                // ],
                // endDate: [
                //     {
                //         required: true,
                //         message: "请选择有效日期",
                //         trigger: "blur"
                //     }
                // ],
                // price: [
                //     {
                //         required: true,
                //         message: "请输入产品价格",
                //         trigger: "blur"
                //     }
                // ],
                // agentPrice: [
                //     {
                //         required: true,
                //         message: "请输入产品价格",
                //         trigger: "blur"
                //     }
                // ],
            }
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {
        "queryData.industryId"(industryId) {
            this.queryData.examId = null;
            if (industryId) {
                this.loadExam(industryId);
            } else {
                this.examData = [];
            }
        },

        "dataForm.industryId"(industryId) {
            if (this.dataForm.addAction) {
                this.dataForm.examId = null;
            }
            this.loadExam1(industryId);
        },
        "dataForm.examId"(examId) {
            if (this.dataForm.addAction) {
                this.dataForm.categoryId = null;
                this.dataForm.columnIds = [];
                this.columnData = [];
            }
            if (examId) {
                this.loadCategory(examId);
            } else {
                this.categoryData = [];
            }

        },
        "dataForm.categoryId"(categoryId) {
            if (categoryId) {
                this.loadColumn(categoryId);
            }

        }
    },
    created() {
        this.loadIndustry();
    },
    mounted() {
    },
    methods: {
        search(queryData = {}) {
            this.loadTable("/exam/product/base/page", {
                ...queryData,
                industryId:
                    this.queryData.examType === "gjtk"
                        ? "gjtk"
                        : this.queryData.industryId
            });
        },
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        // loadOldData(id) {
        //     this.columnData = [];
        //     this.columnDataIds = [];
        //     if (id) {
        //         get("/exam/product/base/column-details", {id: id}).then(res => {
        //             res.forEach(r => {
        //                 this.columnData.push(r);
        //                 this.columnDataIds.push(r.id);
        //             })
        //
        //         })
        //     }
        //
        // },
        coverData(data) {
            //console.log("coverData",data)
            // data.examType =
            //     data.industryId === "gjtk"
            //         ? "gjtk"
            //         : "zhiye";
            // this.loadOldData(data.id);
            return data;
        },
        resetForm(){
            this.$refs.dataForm.validate(res=>{});
        },
        save(url) {
            this.formDataSave(url);
            // return new Promise((r, j) => {
            //     this.$refs.dataForm.validate(valid => {
            //         if (valid) {
            //             r();
            //         } else {
            //             j();
            //         }
            //     });
            // })
            //     .then(() => {
            //         // if (!this.dataForm.days && !this.dataForm.endDate) {
            //         //     this.$message.warning("有效天数和有效日期(优先)不能同时为空")
            //         //     return;
            //         // }
            //         this.submitFlag = true;
            //         const promise = this.dataForm.addAction
            //             ? post(url, this.dataForm)
            //             : put(url, this.dataForm);
            //         return promise
            //             .then(res => {
            //                 this.dialogFormVisible = false;
            //                 this.search();
            //                 return res;
            //             })
            //             .finally(() => {
            //                 this.submitFlag = false;
            //             });
            //     })
            //     .catch(e => {
            //         console.error(e);
            //     });
        },
        loadExam1(industryId) {
            if(!industryId){
                this.dataFormExamData = [];
                return;
            }
            this.dataFormExamFlag = true;
            get("/exam/exam/list", {
                industryId,
                size: 1000
            })
                .then(res => {
                    this.dataFormExamData = res;
                })
                .finally(() => {
                    this.dataFormExamFlag = false;
                });
        },
        loadCategory(examId, name) {
            this.categoryFlag = true;
            get("/exam/category/list", {
                examId,
                name,
                size: 2000,
                tree: false
            })
                .then(res => {
                    this.categoryData = treeList2Tree(res);
                })
                .finally(() => {
                    this.categoryFlag = false;
                });
        },
        loadColumn(categoryId, name) {
            get("/exam/column/list", {
                categoryId,
                name,
                size: 1000,
            })
                .then(res => {

                    this.columnData = res;
                    let columnIds=[];
                    // if ( this.dataForm.addAction || !this.firstChangeCategory){
                    //     res.forEach( re => columnIds.push(re.id));
                    // }
                    //this.dataForm.columnIds=columnIds;
                    this.firstChangeCategory =false;
                    // res.forEach(r => {
                    //     if (!this.columnDataIds.includes(r.id)) {
                    //         this.columnData.push(r);
                    //         this.columnDataIds.push(r.id);
                    //     }
                    //
                    // })

                })
        },
        loadIndustry() {
            this.industryFlag = true;
            get("/exam/industry/list",{size: 1000})
                .then(res => {
                    this.industryData = res;
                })
                .finally(() => {
                    this.industryFlag = false;
                });
        },
        loadExam(industryId, name) {
            this.examFlag = true;
            get("/exam/exam/list", {
                industryId,
                name,
                size: 1000
            })
                .then(res => {
                    this.examData = res;
                })
                .finally(() => {
                    this.examFlag = false;
                });
        },
    }
};
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel {
    width: 300px;
}
</style>
